/* eslint-disable no-unused-vars */
<template>
    <div class="create">
        <div class="choice">
            <el-button class="creating">我要创造</el-button>
            <el-button class="open">我要开课</el-button>
        </div>
        <div class="mid">
            <div class="_input">
                <div class="title">
                    <div class="inputClass">
                        <div class="lab">
                            <span style="color:red; margin-right:5px" >*</span> 
                            <span>标题：</span>
                        </div>
                            <el-input 
                            v-model="inputTitle" 
                            
                            @input="getTitle"
                            placeholder="请在这里填写标题"
                            ></el-input>

                    </div>
                </div>
                
                <div class="introduce">
                    <div class="inputClass">
                        <div class="lab">
                            <span >介绍：</span>
                        </div>
                            <el-input type="textarea" 
                            show-word-limit :rows="5" 
                            placeholder="请输入内容" 
                            v-model="textarea"
                            @input="getIntroduce"
                            ></el-input>
                    </div>
                </div>
                <div class="num">{{introduceNum}}/999</div>
            </div>
            <div class="upload">
                <div class="_text">
                    <span >*</span>
                    <span>上传视频</span>    
                </div>
                <div class="box">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>

                </div>
            </div>
        </div>
        <div class="ruleSubmit">
            <el-button round circle  class="left"></el-button>
            <span >《非遗平台视频发布服务协议》</span>
            <el-button round>发布</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            textarea:'',
            inputTitle:'',
            introduceNum:0,
            fileList: [
                {name: 'food.jpeg', url:'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},    
                {name: 'food2.jpeg', url:'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]

        }
    },
    methods:{
        getTitle(){
            
        },
        getIntroduce(){
            let str = this.textarea
            // eslint-disable-next-line no-unused-vars
            let num = 0;
            for(let s in str){
                if(s>127) num+=2;
                else num++;
            }
            this.introduceNum = num;
        },
        handleRemove(file, fileList) { 
            console.log(file, fileList); 
        },
        handlePreview(file) { 
            console.log(file); 
        }, 
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length}
            个文件，共选择了 ${files.length + fileList.length} 个文件`);
         },
        beforeRemove(file, fileList) { 
            console.log(fileList);
            return this.$confirm(`确定移除 ${ file.name}？`); 
        } 
    }


    
}
</script>
<style lang="less" scoped>
    .create{
        height: 400px;
        margin-top: 3px;
        background-color: #fff;
        border-radius: 20px;
        padding: 20px;
        .choice{
            //margin-top: 10px;
            .el-button{
                border: 1 solid red;
                border-radius: 10px;
                width: 180px;
                height: 60px;
                font-size: 24px;
                color: #fff;
            }
            .creating{ background-color: red; } 
            .open{background-color: #7f7f7f; }
        }
        .mid{
            display: flex;
            flex-direction: row;
            ._input{
                width: 600px;
                position: relative;
                .title,.introduce{
                    margin: 40px;
                }
                .num{
                    position: absolute;
                    left: 5%;
                    bottom: 10px;
                    margin-left: 500px;
                }
            }
            .inputClass{
               display: flex;
                flex-direction: row;
                font-size: 25px;
                font-weight: 800;
                
                .el-input{
                    width: 400px;
                    /deep/.el-input__inner{
                        height: 60px;
                    }
                }
                /deep/.el-textarea__inner{
                    width: 450px;
                }
            
            }
            .upload{
                font-size: 20px;
                margin-left: 50px;
                .box{
                    border: 1px dotted black;
                    width: 600px;
                    height: 220px;
                }
            }

        }
        .ruleSubmit{
            position: relative;
            margin-left: 70%;
            display:flex; 
            flex-direction: row;
            flex-flow: wrap; 
            .el-radio /deep/ .el-radio__inner{
                width: 25px; 
                height: 25px;
            }
            .el-radio /deep/ .el-radio__label{ 
                font-size: 25px;
            }
            span{
                color : #fe8c00;
                line-height: 40px;
            }
            .el-button{
                margin-left: 20px;
                background-color: #aaaaaa;
                color: #fff;
                font-size: 20px;
                width: 120px;
                border-radius: 20px;
            }
            .left{
                position: absolute;
                left: -60px;
                bottom: 10px;
                 width: 10px;
                 height: 10px;
                border-radius: 60%;
                background-color: #fff;
                border: 1px solid black;
            }
            active{
                
            }

        }
    }
</style>